<template>
  <div class='index-container'>
    <van-nav-bar title='往期回放' left-arrow @click-left='onClickLeft' ref='nav' />
    <div
class='container'
         v-bind:style='{ marginTop: `${navBarHeight}px`, minHeight: `calc(100vh - ${navBarHeight}px)` }'>
      <div style='height: 41px' />
      <div class='player' v-for='(item, index) in playerList' :key='index'>
        <div ref='player' class='player-d'></div>
        <div class='title'>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
<script>
// import { videoPlayer } from 'vue-video-player'
import DPlayer from 'dplayer'
import { playbacks } from '@/api/live.js'

export default {
  components: {
    // videoPlayer
  },
  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight
  },
  data() {
    return {
      navBarHeight: 0,
      playerList: [],
      dps: [] // 初始化的DP对象
    }
  },
  created() {
    playbacks().then(data => {
      if (data.code === 200) {
        const playerList = data.data.map(item => {
          return {
            initialized: false,
            title: item.title,
            poster: item.image, // 你的封面地址
            src: item.playback_url,
            height: 178 // 视频框的高度
          }
        })
        this.playerList = playerList
        this.init(playerList)
      }
    })
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    init(playList) {
      this.$nextTick(() => {
        // 初始化播放器
        this.dps = playList.map((item, index) => {
          console.log(this.$refs.player[index])
          const dp = new DPlayer({
            container: this.$refs.player[index],
            theme: '#FADFA3',
            lang: 'zh-cn',
            video: {
              pic: item.poster,
              url: item.src,
              type: 'hls',
              pluginOptions: {
                hls: {
                  autoStartLoad: true,
                  startPosition: -1
                }
              }
            }
          })

          document.getElementsByClassName('dplayer-setting')[index].style.display = 'none'
          document.getElementsByClassName('dplayer-icon dplayer-full-in-icon')[index].style.display = 'none'
          return dp
        })
      })
    },
    onPlayerReadied(item, index) {
      if (!item.initialized) {
        item.initialized = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/css/video.scss';

.container {
  padding-left: 28px;
  padding-right: 28px;
  background: linear-gradient(180deg, #E71C5B 0%, #F9364B 20.98%, #FB7043 47.69%, #FFC355 90.55%, #C4F290 100.39%);
  opacity: 1;

  .player {
    padding-bottom: 31px;
  }

  .title {
    margin-top: 11px;
    font-size: 18px;
    font-family: SourceHanSansCN-Normal-GBpc-EUC-H;
    color: #ffffff;
    opacity: 1;
  }
}
.player-d {
  height: 178px;
}
</style>
